<template>
  <div class="app-container">
    <div class="item2">
      <div class="header">
        <div class="title1">
          <i class="el-icon-data-analysis"></i><span>托盘出库查询</span>
        </div>
        <div class="backB">
          <img src="@/assets/images/back.png" alt="" @click="goBack" />
        </div>
      </div>
    </div>
    <div class="formCenter">
      <el-form
        :model="queryParams"
        size="large"
        :inline="true"
        ref="queryForm"
        :rules="formRules"
        label-width="90px"
      >
        <el-form-item label="巷道:" prop="startRegion">
          <el-input
            v-model="queryParams.startRegion"
            placeholder="请输入巷道"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="任务类型" prop="workType">
          <el-select
            v-model="queryParams.workType"
            placeholder="请选择任务类型"
            clearable
          >
            <el-option
              v-for="dict in dict.type.work_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="托盘编码:" prop="containerNo">
          <el-input
            v-model="queryParams.containerNo"
            placeholder="请输入托盘编码"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="medium"
            @click="handleQuery"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      border
      height="680"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      :header-cell-style="{ background: '#1890ff', color: '#ffffff' }"
    >
      <el-table-column align="center" prop="startRegion" label="巷道">
      </el-table-column>
      <el-table-column align="center" prop="workType" label="任务类型">
      </el-table-column>
      <el-table-column
        align="center"
        prop="upperSystemTaskId"
        label="WMS任务号"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="allocationDetailsId"
        label="分配单ID"
      >
      </el-table-column>
      <el-table-column align="center" prop="containerNo" label="托盘码">
      </el-table-column>
      <el-table-column align="center" prop="extend1" label="商品名称">
      </el-table-column>
      <el-table-column align="center" prop="lotId" label="批次号">
      </el-table-column>
      <el-table-column align="center" prop="planQty" label="商品数量">
      </el-table-column>
      <el-table-column align="center" prop="createTime" label="任务接收时间">
      </el-table-column>
      <el-table-column align="center" prop="priority" label="任务优先级">
      </el-table-column>
      <el-table-column align="center" prop="status" label="任务状态">
      </el-table-column>
      <el-table-column align="center" prop="taskIndex" label="搬运任务序号">
      </el-table-column>
      <el-table-column align="center" prop="fromArea" label="搬运任务起始区域">
      </el-table-column>
      <el-table-column align="center" prop="toArea" label="搬运任务目标区域">
      </el-table-column>
      <el-table-column align="center" prop="sendTime" label="搬运任务发送时间">
      </el-table-column>
      <el-table-column
        align="center"
        prop="moveTime"
        label="搬运任务开始执行时间"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="arriveTime"
        label="搬运任务到达时间"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  getPickwcsList,
} from "@/api/subSystem/continer";
export default {
  dicts: ["work_type", "bill_type", "status_type"],
  data() {
    return {
      // 托盘出库
      tableData:[],
      loading: false,
      queryParams: {
        startRegion: null,
        containerNo: null,
        workType: null,
      },
      formRules: {
        containerNo: [
          { required: true, message: "请输入托盘编号", trigger: "blur" },
        ],
      },
    };
  },
  methods:{
    // 托盘出库
    handleQuery() {
      this.$refs.queryForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          getPickwcsList(this.queryParams).then((res) => {
            this.tableData = res.data;
            this.loading = false;
          });
        }
      });
    },
     goBack() {
      this.$router.push("/subSystem1");
    },
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  .el-icon-data-analysis::before {
    color: #00d9ff;
    margin-right: 8px;
  }
  .title1 {
    font-size: 16px;
    // margin-bottom: 15px;
    color: #808080;
    width: 170px;
    padding: 5px;
    border-bottom: 1px dotted #8ddfff;
  }
  .header {
    margin-top: -10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 220px;
      margin-right: 20px;
    }

    .backB {
      cursor: pointer;

      img {
        width: 20%;
      }
    }
  }
  .formCenter {
    height: 62px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
  }
  .footer {
    margin-top: 20px;
    width: 100%;
    min-height: 200px;
  }
}
</style>